<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimum-scale=1.0">
    <title>flex布局父项常见属性</title>
    <style>
        /* flex布局父项常见属性
        flex-direction: row; 设置横向排列
        flex-direction: row-reverse; 设置横向排列，但反向
        flex-direction: column; 设置纵向排列
        flex-direction: column-reverse; 设置纵向排列，但反向
        flex-wrap: nowrap; 不换行（如果装不开，会缩小子元素的宽度）
        flex-wrap: wrap; 换行
        flex-wrap: wrap-reverse; 换行，但反向
        flex-flow: row wrap; 横向排列，换行 (合写)*/
        /* 主轴的位置 */
        /* justify-content: flex-start; 左对齐
        justify-content: flex-end; 右对齐
       justify-content: center; 居中
        justify-content: space-between; 两边对齐，再平分剩余的空间
        justify-content: space-around; 直接平分剩余空间 */
        /* 侧轴的位置 */
        /* align-items: flex-start; 顶部对齐（单行，不换行的情况）
        align-items: flex-end; 底部对齐
        align-items: center; 居中
        align-items: stretch; 拉伸（高度去掉）
        align-content（多个盒子的情况）: flex-start; 顶部对齐 （多行换行的情况）
        align-content: flex-end; 底部对齐
        align-content: center;
        align-content: space-between;（上面贴上面，下贴下面）
        align-content: space-around;
*/
        div {
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            height: 300px;
            background-color: #ccc;
            /* align-content: space-between; */
            align-content: space-around;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: #f00;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div>
        <!-- 摆放不开时，会缩小子元素的大小 ,默认不换行-->
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>